<template>
	<div>
		<!-- template -->

		<div class="navbar" role="navigation">
			<div class="container-fluid container-nav">
				<!-- Navbar Action -->
				<ul class="nav navbar-nav navbar-actions navbar-left">
					<li class="visible-md visible-lg"><a href="#" id="main-menu-toggle"><i class="fa fa-th-large"></i></a></li>
					<li class="visible-xs visible-sm"><a href="#" id="sidebar-menu"><i class="fa fa-navicon"></i></a></li>
				</ul>
				<!-- Navbar Left -->
				<div class="navbar-left">
					<!-- Search Form -->
					<!--<form class="search navbar-form">
						<div class="input-group input-search">
							<input type="text" class="form-control" name="q" id="q" placeholder="Search...">
							<span class="input-group-btn">
								<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
							</span>
						</div>
					</form>-->
				</div>
				<!-- Navbar Right -->
				<div class="navbar-right">

					<!-- Userbox -->
					<div class="userbox">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<div class="profile-info">
								<span class="name" v-text="userName"></span>
								<span class="role" v-text="roleName"></span>
							</div>
							<i class="fa custom-caret"></i>
						</a>
						<div class="dropdown-menu">
							<ul class="list-unstyled">
								<li class="dropdown-menu-header bk-bg-white bk-margin-top-15">
									<div class="progress progress-xs  progress-striped active">
										<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
											60%
										</div>
									</div>
								</li>
								<li>

									<router-link to="/userCenter"><i class="fa fa-user"></i> 用户中心</router-link>
								</li>
								<li>

									<a @click="loginout"><i class="fa fa-power-off"></i> 退出</a>
								</li>
							</ul>
						</div>
					</div>
					<!-- End Userbox -->
				</div>
				<!-- End Navbar Right -->
			</div>
		</div>

		<!-- template end -->
	</div>
</template>
<script>

	import {mapGetters} from 'vuex'

	export default{
		name: 'adminnav',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				roleInfo: 'getRoleInfo'
			})
		},
		data () {
			return {
				userName: '', // 用户名
				roleName: '', // 角色
				username: localStorage.getItem("username"),
				userpos: localStorage.getItem("userpos")
			}
		},

		methods: {
			setNavStatus (names) {
				// 选中状态
				this.$store.dispatch('fetchNavStatus', names)
			},

			loginout () {
				this.$store.dispatch('fetchLogout')

				localStorage.clear()
				window.location.reload()
			}
		},

		mounted () {

			// 角色
			this.$store.dispatch('fetchRole')
		},

		components: {},

		watch: {
			roleInfo (newVal) {
				this.userName = newVal.description
				if(newVal.role === 'ROLE_ADMIN') {
					this.roleName = '超级管理员'
				} else if(newVal.role === 'ROLE_SALES_DIRECTOR') {
					this.roleName = '运营总监'
				}else if(newVal.role === 'ROLE_SALES') {
					this.roleName = '业务员'
				}else if(newVal.role === 'ROLE_USER_LV1') {
					this.roleName = '代理商物联业务管理平台'
				}else {
					this.roleName = '艾特物联业务管理平台'
				}
			}
		}
	}
</script>

<style>

</style>